<html>
  <head>
    <script type="text/javascript" src="http://code.angularjs.org/1.1.3/angular.js"></script>
    <script type="text/javascript">
      angular.module('ui.directives',[]);
    </script>
    <script type="text/javascript" src="../mask.js"></script>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
  </head>
  <body ng-app="ui.directives">
    <div class="container-fluid">
        <form name="demo" class="form-horizontal">
          <div class="control-group">

            <div class="controls">
              <p class="lead" style="margin-top:60px">uiMask Directive Demo</p>
            </div>

            <label class="control-label">Masked Input:</label>
            <div class="controls">
              <input name="masked" ui-mask="{{y}}" ng-model="x" placeholder="Write a mask or click a button" class="input-large" style="vertical-align: top;">
              <span class="help-inline">

                <div ng-show="x.length">Model value: <code>{{ x }}</code></div>
                <div ng-hide="x.length">Model value: <code>undefined</code></div>
                <div ng-show="demo.masked.$viewValue.length">NgModelController.$viewValue: <code>{{ demo.masked.$viewValue }}</code></div>
                <div ng-hide="demo.masked.$viewValue.length">NgModelController.$viewValue: <code>undefined</code></div>
              </span>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">Mask Definition:</label>
            <div class="controls">
              <input ng-model="y" class="input-large" style="vertical-align: top;">
              <span class="help-inline"><code>A</code> Any letter.<br><code>9</code> Any number.<br><code>*</code> Any letter or number.</span>
            </div>
          </div>

          <div class="control-group">
            <label class="control-label">Masks:</label>
            <div class="controls">
              <p><button class="btn" ng-click="y = undefined">Set to undefined (uninitialize)</button></p>
            </div>
            <div class="controls">
              <p><button class="btn" ng-click="y = '(999) 999-9999'">Set to (999) 999-9999</button></p>
            </div>
            <div class="controls">
              <p><button class="btn" ng-click="y = '(999) 999-9999 ext. 999'">Set to (999) 999-9999 ext. 999</button></p>
            </div>
            <div class="controls">
              <p><button class="btn" ng-click="y = '(**: AAA-999)'">Set to (**: AAA-999)</button></p>
            </div>
          </div>
        </form>
    </div>
  </body>
</html>